<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>体质</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="stylesheet" href="css/cui.css"/>
    <link rel="stylesheet" href="css/lib.css"/>
    <link rel="stylesheet" href="css/style.css"/>
</head>
<body class="index">

<!-- 头部 -->
<section id="hd">
    <div class="hdr"><a class="a-serv" href="javascript:ysf.open()"></a></div>
    <ul class="m-tab1 TAB_CLICK" id=".tabshow1">
        <li class="on"><a href="javascript:void(0);">建议</a></li>
        <li><a href="javascript:void(0);">活动</a></li>
    </ul>
</section>
<!-- 头部 end-->


<!-- 主内容 -->
<section id="bd">
    <div class="tabshow1">
        <!-- banner -->
        <div id="ban1">
            <a style="background-image:url(img/ban1.jpg);" href="">
                <p>怎样运动才健康？</p>
            </a>
        </div>
        <!-- banner end-->
        <!-- 列表 -->
        <ul class="ul-list2 dn">
            <li v-for="e in advice">
                <div class="pic"><a :href="'article.html?type=advice&id='+e.Id"><img src="" alt=""></a></div>
                <div class="txt">
                    <h3><a :href="'article.html?type=advice&id='+e.Id" v-text="e.Title"></a></h3>
                    <p v-text="e.Introduction"></p>
                </div>
            </li>
            <infinite-loading :on-infinite="onInfinite1" ref="infiniteLoading1"></infinite-loading>
        </ul>
        <!-- 列表 end-->
    </div>
    <div class="tabshow1 dn">
        <!-- 列表 -->
        <ul class="ul-list3">
            <li v-for="e in activity">
                <h3><a href="">{{e.Title}}</a></h3>
                <p>3月7日 07:00~3月9日 16:00</p>
                <p><i class="i-loca"></i>{{e.Position}}</p>
                <div class="pic"><a :href="'activity.html?activityid='+e.Id"><img src="img/pic2.jpg" alt=""></a></div>
                <a class="m-btn1" :href="'activity.html?activityid='+e.Id">查看详情</a>
            </li>
            <infinite-loading :on-infinite="onInfinite2" ref="infiniteLoading2"></infinite-loading>
        </ul>
        <!-- 列表 end-->
    </div>

</section>
<!-- 主内容 end-->
<!-- 底部 -->
<div class="h50"></div>
<section id="fd">
    <ul class="f-nav">
        <li class="on"><a href="index.html"><i class="icon1"></i>首页</a></li>
        <li><a href="constitution.html"><i class="icon2"></i>体质</a></li>
        <li><a href="constitution.html"><i class="icon-quanzi"></i>圈子</a></li>
        <li><a href="self.html"><i class="icon3"></i>个人</a></li>
    </ul>
</section>
<!-- 底部 end-->
<script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/lib.js"></script>
<script src="http://cdn.bootcss.com/vue/2.2.6/vue.min.js"></script>
<script src="js/vue-infinite-loading.js"></script>
<script src="http://cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>
<script src="js/axios-config.js"></script>
<script>
    var initTime = new Date().getTime() * 1000000;
    var vm = new Vue({
        el: '#bd',
        data: {
            advice: [],
            activity: []
        },
        mounted: function () {
            this.$refs.infiniteLoading2.$emit('$InfiniteLoading:complete');
        },
        beforeCreate: function () {
            var _ = this;
            axios.advice('/', {
                updatetime: initTime,
                offset: 0
            }).then(function (res) {
                if(res.data.Code===2){
                    goLogin()
                }
                _.advice = res.data.List;
                $('.ul-list2').show();
            });
            axios.activity('/', {
                updatetime: initTime,
                offset: 0
            }).then(function (res) {
                _.activity = res.data.List
            })
        },
        methods: {
            onInfinite1: function () {
                var _ = this;
                if (_.advice.length === 0) {
                    return false
                }
                axios.advice('/', {
                    updatetime: initTime,
                    offset: _.advice.length
                }).then(function (res) {
                    _.advice = _.advice.concat(res.data.List);
                    _.$refs.infiniteLoading1.$emit('$InfiniteLoading:loaded');
                    if (_.advice.length >= res.data.TotalCount) {
                        _.$refs.infiniteLoading1.$emit('$InfiniteLoading:complete');
                    }
                })
            },
            onInfinite2: function () {
                var _ = this;
                if (_.activity.length === 0) {
                    return false
                }
                axios.activity('/', {
                    updatetime: initTime,
                    offset: _.activity.length
                }).then(function (res) {
                    _.activity = _.activity.concat(res.data.List);
                    _.$refs.infiniteLoading1.$emit('$InfiniteLoading:loaded');
                    if (_.activity.length >= res.data.TotalCount) {
                        _.$refs.infiniteLoading1.$emit('$InfiniteLoading:complete');
                    }
                })
            }
        }
    })
</script>
<script src="https://qiyukf.com/script/97f24cc2cee80a413ccba24d57e94003.js" defer async></script>
</body>
</html>